<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书-读者留言管理</title>
    <link rel="icon" href="/static/images/t_logo.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/static/css/lyk-global.css" />
    <link rel="stylesheet" href="/static/elementui/lib/theme-chalk/index.css">
    <script src="/static/js/jquery.min.js" type="text/javascript"></script>
    <script src="/static/js/requestApi.js" type="text/javascript"></script>
    <script src="/static/js/vue/vue.js"></script>
    <!-- 引入elementui -->
    <script src="/static/elementui/js/element.js"></script>
    <script src="/static/js/axios.min.js"></script>
    <script src="/static/js/axios-config.js"></script>
    <script src="/static/js/utilJs.js"></script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="/static/vue/components/ueditor/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="/static/vue/components/ueditor/ueditor.all.js"></script>
    <script src="/static/vue/components/ueditorTemplate.js"></script>
</head>
<style>
    *{
        font-size: 14px
    }
    [v-cloak] {
        display: none;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .el-input.is-disabled .el-input__inner {
        color: black !important;
    }

    .el-textarea.is-disabled .el-textarea__inner {
        color: black !important;
    }
</style>
<body style="background-color: #fff">
<div id="app" v-cloak>
    <div class="mt-8 ml-4">
        <div class="df-aic ">
            <el-input placeholder="请输入主题" size="small" style="width:200px;" class="ml-2" v-model="queryParam.subject" @keyup.native.enter="getTableDataMethod(true)"></el-input>
            <el-input placeholder="请输入用户名称" size="small" style="width:200px;" class="ml-2" v-model="queryParam.createUser" @keyup.native.enter="getTableDataMethod(true)"></el-input>
            <el-date-picker size="small"
                            v-model="dateSelectValue"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="留言开始时间"
                            end-placeholder="留言结束时间" class="ml-2" value-format="yyyy-MM-dd">
            </el-date-picker>
            <el-button type="primary" size="small" class="ml-2" @click="getTableDataMethod(true)">搜索</el-button>
            <el-button type="primary" size="small" class="ml-2" @click="addReaderCommentMethod(1)" v-if="identity =='user'">我要留言</el-button>
        </div>
        <el-table :data="tableData" v-loading="tableDataLoading" class="mt-4">
            <el-table-column prop="subject" label="主题" width="150"></el-table-column>
            <el-table-column prop="createUser" label="用户" width="300"></el-table-column>
            <el-table-column prop="createTime" label="提问时间" width="200"></el-table-column>
            <el-table-column prop="content" label="提问内容" width="300"></el-table-column>
            <el-table-column prop="replyContent" label="回复内容" width="300"></el-table-column>
            <el-table-column label="状态" width="150">
                <template slot-scope="scope">
                    <el-tag type="info" v-if="scope.row.state === 1 ">待回复</el-tag>
                    <el-tag type="success" v-if="scope.row.state === 2 ">已回复</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">
                    <div v-loading="deleteLoading">
                        <el-button size="small" @click="addReaderCommentMethod(-1,scope.row)" class="mt-2" >查看</el-button>
                        <el-button size="small" @click="addReaderCommentMethod(2,scope.row)" class="mt-2" v-if="scope.row.state === 1 && identity =='admin'" >回复</el-button>
                        <el-popconfirm :title='"是否删除该条数据？"'
                                       @confirm="deleteReaderCommentMethod(scope.row)" class="ml-2" v-if="identity =='admin'">
                            <el-button slot="reference" type="danger" size="small" v-loading="deleteLoading"  class="mt-2">删除</el-button>
                        </el-popconfirm>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <el-pagination background layout="total,sizes,prev, pager, next" :total="tableDataPaging.total"
                   :page-sizes="[10, 20, 50]"
                   prev-text="上一页" next-text="下一页"
                   :page-size="tableDataPaging.pageSize"
                   :current-page="tableDataPaging.currentPage"
                   @current-change="tableDataPagingChange"
                   @prev-click="tableDataPagingChange" @next-click="tableDataPagingChange"
                   @size-change="tableDataPagingSizeChange"
                   style="float:right;margin-top: 40px;padding-bottom:50px;">
    </el-pagination>

    <el-dialog :title="addOrReplyReaderCommentDialogTitle" :visible.sync="addOrReplyReaderCommentDialogVisible" width="1200px"  append-to-body	>
        <div>
            <div class="mt-8 ml-4">
                <div class="df-aic">
                    <el-form ref="addReaderCommentForm" :model="addReaderCommentForm" label-width="150px" >
                        <el-form-item label="主题" prop="subject"  required>
                            <el-input v-model="addReaderCommentForm.subject" style="width:400px;" placeholder="请输入主题" size="small" :disabled="operationType != 1"></el-input>
                        </el-form-item>
                        <el-form-item label="图片" prop="picUrl">
                            <el-upload
                                    class="avatar-uploader"
                                    action="/readerComment/saveReaderCommentPic"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess" :disabled="operationType != 1"
                            >
                                <img  :src="'/book/getLocalSystemPic?filePath='+ addReaderCommentForm.picUrl" class="avatar" v-if="addReaderCommentForm.picUrl" style="width:300px;">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="内容" prop="content"  required>
                            <el-input v-model="addReaderCommentForm.content" type="textarea" style="width:400px;"  :rows="10" placeholder="请输入内容" size="small"
                            :disabled="operationType != 1"></el-input>
                        </el-form-item>

                        <el-form-item label="回复" v-if="operationType == 2 || operationType == -1">
                            <el-input v-model="addReaderCommentForm.replyContent" type="textarea" style="width:400px;"  :rows="10" placeholder="请输入回复的内容" size="small"
                                      :disabled="operationType == -1"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
        <div class="df-aic-jcc mt-9 mb-9">
            <el-button type="primary" size="small" @click="addOrReplyReaderCommentSubmit" v-if="operationType == 1">提交</el-button>
            <el-button type="primary" size="small" @click="replyReaderCommentMethod" v-if="operationType == 2 && identity =='admin'" >回复</el-button>
            <el-button size="small" class="ml-6" @click="addOrReplyReaderCommentDialogVisible = false">取消</el-button>
        </div>
    </el-dialog>

</div>
</body>

<script type="text/javascript">
    const vm = new Vue({ // 配置对象 options
        // 配置选项(option)
        el: '#app', // element: 指定用vue来管理页面中的哪个标签区域
        components: {
        },
        data() {
            return {
                dateSelectValue:"",
                deleteLoading : false,
                queryParam : {
                    subject:"",
                    createUser:"",
                },
                tableData : [],
                tableDataLoading : false,
                tableDataPaging : {
                    currentPage : 1,
                    pageSize : 10,
                    total : 0,
                },
                addReaderCommentForm:{
                    subject:"",
                    content:"",
                    picUrl:"",
                    replyContent:"",
                    id:"",
                    createUser:"",
                    createTime:"",
                    state:"",
                },

                addOrReplyReaderCommentDialogVisible:false,
                addOrReplyReaderCommentDialogTitle:'',
                operationType:"",
                identity:""
            }
        },
        mounted() {
            let that = this;
            this.$nextTick(function () {
                let type = getQueryString("type")
                if(type){
                    that.identity = type;
                }
                this.getTableDataMethod();
            });
        },
        methods: {
            handleAvatarSuccess(res, file) {
                this.addReaderCommentForm.picUrl = file.response;
            },
            addReaderCommentMethod(type,row){
                let that = this;
                that.addOrReplyReaderCommentDialogVisible = true;
                this.$nextTick(function () {
                    if(type == 1 ){
                        that.addOrReplyReaderCommentDialogTitle = "新增读者留言";
                    }else if(type == 2 ){
                        that.addOrReplyReaderCommentDialogTitle = "回复读者留言";
                    }else if(type == -1 ){
                        that.addOrReplyReaderCommentDialogTitle = "查看读者留言";
                    }
                    that.operationType = type;

                    this.$refs['addReaderCommentForm'].resetFields();//还原数据
                    Object.assign(this.$data.addReaderCommentForm,this.$options.data().addReaderCommentForm);
                    if(row){
                        let deepCopyRow = JSON.parse(JSON.stringify(row));
                        that.addReaderCommentForm = deepCopyRow;//深拷贝一下
                        console.log(that.addReaderCommentForm);
                    }
                });
            },

            //添加或者回复留言的方法
            addOrReplyReaderCommentSubmit(){
                let that = this;
                this.$refs["addReaderCommentForm"].validate((valid) => {
                    if (valid) {
                        let deepCopyForm = JSON.parse(JSON.stringify(that.addReaderCommentForm));
                        let url = "";
                        if (!deepCopyForm.id) {
                            url = "readerComment/addReaderComment";
                        } else {
                            url = "readerComment/updateNotice";
                        }
                        requestApiTB(url, deepCopyForm, 'POST', function (res) {
                            if (res.code === 0) {
                                alert("操作成功");
                                that.addOrReplyReaderCommentDialogVisible = false;
                                that.getTableDataMethod(true);
                            } else {
                                that.$message.error(res.msg);
                            }
                        });
                    } else {
                        that.$message.error("表单校验不通过");
                        return false;
                    }
                });
            },

            tableDataPagingChange(val) {
                let that = this;
                that.tableDataPaging.currentPage = val;
                that.getTableDataMethod();
            },
            tableDataPagingSizeChange(val) {
                let that = this;
                that.tableDataPaging.pageSize = val;
                that.getTableDataMethod();
            },

            //获取表格的数据
            getTableDataMethod(isChongZhi){
                let that = this;
                if (isChongZhi) {
                    this.tableDataPaging.currentPage = 1;
                }
                const {subject,createUser} = this.queryParam
                let queryData = {
                    subject: $.trim(subject),
                    specialUserName: $.trim(createUser),//如果是管理员这个才会生效
                    identity:that.identity,
                    pageNum: this.tableDataPaging.currentPage,
                    pageSize: this.tableDataPaging.pageSize,
                }
                if(that.dateSelectValue){
                    queryData.startTime = that.dateSelectValue[0] + " 00:00:00";
                    queryData.endTime = that.dateSelectValue[1] + " 23:59:59";
                }
                this.tableDataLoading = true;
                that.tableData = [];
                axios.post('/readerComment/getReaderCommentList', queryData)
                    .then(result => {
                        let res = result.data;
                        this.tableDataLoading = false;
                        if (res.code === 0) {
                            that.tableData = res.data.list;
                            that.tableDataPaging.total = res.data.total;
                        }
                    }).catch(error => {
                    that.$message.error("error");
                    this.tableDataLoading = false
                })
            },
            deleteReaderCommentMethod(row){
                let that = this;
                if(!row.id){
                    that.$message.error("尚无id");
                    return;
                };
                that.deleteLoading = true;
                requestApi("readerComment/delReaderComment",{"id" : row.id}, "POST", function(res){
                    that.deleteLoading = false;
                    if(res.code === 0){
                        that.$message.success("删除成功");
                        that.getTableDataMethod(true);
                    }else{
                        that.$message.error(res.msg);
                    }
                });
            },

            //回复评论
            replyReaderCommentMethod(){
                let that = this;
                let deepCopyForm = JSON.parse(JSON.stringify(that.addReaderCommentForm));
                if(!deepCopyForm.id){
                    alert("请传递参数");
                    return;
                }
                if(!deepCopyForm.replyContent){
                    alert("请填写回复内容");
                    return;
                }
                requestApiTB("readerComment/replyReaderReply", {"id":deepCopyForm.id,"replyContent":deepCopyForm.replyContent}, 'POST', function (res) {
                    if (res.code === 0) {
                        alert("回复成功");
                        that.addOrReplyReaderCommentDialogVisible = false;
                        that.getTableDataMethod(true);
                    } else {
                        that.$message.error(res.msg);
                    }
                });
            },





        }
    })
</script>
</html>